<template>
<div style="border:7px #999 solid;width:20%;height:610px;margin-left:40%;border-radius:40px;">
  <div class="a">
    <div class="a1">
      <div>身高</div>
      <div class="a3"></div>
    </div>
    <a href="#/show1">
      <div class="a2">
        <div>体重</div>
      </div>
    </a>
  </div>

  <div class="c">
    <div class="c1">
      <div class="c2">日期</div>
      <div class="c3">身高</div>
    </div>
    <div class="c1" v-for="v in tableData">
      <div class="c2">{{v.date}}</div>
      <div class="c3"><font style="color:#4c0da5;font-size:17px;">{{v.cm}}</font>cm</div>
      <img src="../assets/4.png" class="c4">
    </div>
  </div>

  <img src="../assets/1.png" class="img">
</div>
</template>

<script>
export default {
    data () {
        return {
            tableData:[]
        }
    },

    created(){
        let that=this
        this.$axios({
            method:'get',
            url:'http://127.0.0.1/12yue/12yuexingmu/laravel/public/api/czjl',
        })
        .then(function(res){
            console.log(res.data)
            that.tableData=res.data.data
        })
    },

    methods: {
        
    },
}
</script>

<style>
.c4{
  float:left;
  width:18px;
  height:18px;
  margin-top:17px;
  margin-left:60px;
}
.c2{
  float: left;
  font-size:15px;
  width:20%;
  height:20px;
  margin-top:16px;
  font-weight:600;
  color:#aaa;
}
.c3{
  float: left;
  font-size:15px;
  width:30%;
  height:20px;
  margin-top:15px;
  margin-left:40px;
  font-weight:600;
  color:#aaa;
}
.c1{
  width:100%;
  height:45px;
  border-bottom:1px #eee solid;
  float: left;
}
.img{
  width:40px;
  height:40px;
  margin-left:70%;
}
.c{
  margin-left:7%;
  margin-top:30px;
  width:86%;
  height:380px;
}
.b{
  margin-top:25px;
  width:100%;
  height:25px;
}
.b2{
  float: left;
  margin-left:103px;
  width:83px;
  height:23px;
  border:2px #4c0da5 solid;
  border-top-left-radius:13px;
  border-bottom-left-radius:13px;
}
.b4{
  float: left;
  width:83px;
  height:100%;
  background-color:#4c0da5;
  border-top-right-radius:13px;
  border-bottom-right-radius:13px;
}
.b5{
  color:white;
  font-size:14px;
  font-weight:600;
  margin-left:30px;
  margin-top:3px;
}
.b3{
  color:#4c0da5;
  font-size:14px;
  font-weight:600;
  margin-left:25px;
  margin-top:2px;
}
.a{
  width:80%;
  height:40px;
  border-bottom:1px #eee solid;
  margin-left:10%;
  margin-top:40px;
}
.a1{
  float: left;
  color:#4c0da5;
  font-size:15px;
  font-weight: 600;
  margin-left:40px;
}
.a2{
  float: left;
  font-size:15px;
  font-weight: 600;
  margin-left:80px;
}
.a3{
  margin-top:0px;
  width:30px;
  height:5px;
  background-color:#4c0da5;
  border-radius:2px;
  margin-left:0px;
}
</style>
